<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div>
    <van-row align="center" justify="center" type="flex">
      <van-col span="4" style="padding-left: 5px">
        <div class="routerImages"
             style="width: 50px;height: 50px;background-color: black;text-align: center;border-radius: 50%">
          <img :src="this.$store.state.playMusics.images" :class="audioState==='true'?'img1':'img2'"
               style="">
        </div>
      </van-col>
      <van-col span="14">
        <span>{{ this.$store.state.playMusics.title }}</span>
        <span style="font-size: 14px;font-weight: 300"> - {{ this.$store.state.playMusics.author }}</span>
      </van-col>
      <van-col span="3" style="text-align: center" @click="startMusics">
        <van-circle
          :size="25"
          v-model="currentRate"
          :rate="this.$store.state.playMusics.length"
          color="red"
          layer-color="#646566">
          <van-icon v-if="audioState==='true'" name="zanting" color="#646566" size="25px"
                    class-prefix="iconfont"></van-icon>
          <van-icon v-else name="bofang" color="#646566" size="25px" class-prefix="iconfont"></van-icon>
        </van-circle>
      </van-col>
      <van-col span="3" style="text-align: center">
        <van-icon name="caidan" class-prefix="iconfont" size="28px"></van-icon>
      </van-col>
    </van-row>
  </div>
</template>

<script>

export default {
  name: "PlayMusic",
  data() {
    return {
      currentRate: this.$store.state.playMusics.currentTime,

    }
  },
  computed: {
    // 根据isplay计算播放状态
    audioState() {
      return this.$store.state.playMusics.state
    },
    currentTime() {

    }
  }, created() {
  },
  methods: {
    //播放音乐
    startMusics() {
      if (this.$store.state.playMusics.state === 'true') {
        //进行暂停
        this.$store.state.musicAudio.music.pause()
        this.$store.dispatch("changeMusicState", "false")
      } else {
        this.$store.state.musicAudio.music.play()
        this.$store.dispatch("changeMusicState", "true")
      }
    }
  }
}
</script>

<style scoped lang="scss">
.img1 {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  border-radius: 50%;
  animation: rotateImg 10s linear infinite;

}

.img2 {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  border-radius: 50%;
  animation-play-state: paused;

}

.paused {
  animation-play-state: paused;

}

@keyframes rotateImg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
